<template>
  <div class="student">
    <section class="report-box">
      <el-row class="search-box">
        <el-col :span="24">
          <label for="" class="choose">
            <span>缴费日期：</span>
            <el-date-picker
              v-model="dateTime"
              type="daterange"
              size="small"
              placeholder="选择日期范围"
              :picker-options="dateOptions">
            </el-date-picker>
          </label>
          <label for="" class="choose">
            <span>身份证号：</span> <el-input v-model="socialCompanyName" class="select-box" size="small"></el-input>
          </label>
          <label for="" class="choose">
            <span>缴费项目：</span> <el-input v-model="socialPaymentSkuName" class="select-box" size="small"></el-input>
          </label>
          <label for="" class="choose">
            <el-button icon="search" type="primary" size="small" @click="search">筛选</el-button>
          </label>
        </el-col>
      </el-row>
    </section>
    <div class="tip">
      <!--<el-button icon="self-daoru" size="small" class="blue" @click="importInfo">导入</el-button>-->
      <el-button icon="self-daochu" class="blue" size="small" @click="exportData">导出</el-button>
      <!--<el-button icon="document" class="blue" @click.native.prevent="goPage(1)" size="small">新增</el-button>-->
    </div>
    <div class="content">

      <el-table :data="dataList" ref="multipleTable" @selection-change="handleSelectionChange" tooltip-effect="dark" style="width: 100%">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="socialCompanyName" label="姓名"></el-table-column>
        <el-table-column prop="socialCompanyCode" label="身份证号"></el-table-column>
        <el-table-column prop="payTime" label="缴费时间" :formatter="dataFormat"></el-table-column>
        <el-table-column prop="socialPaymentSkuName" label="缴费项目"></el-table-column>
        <el-table-column prop="shouldPay" label="缴费金额" :formatter="moneyFilter"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click.native.prevent="goPage(2, scope.row)" type="text" size="small"> 查看详情 </el-button>
          </template>  
        </el-table-column>        
      </el-table>
    </div>
    <paginate :callback="getData" :page="pageObj"></paginate>    
  </div>
</template>
<script>
import { getPayLists } from 'api/social/payManage/index'
import { timeFormat, currency, getDayInitTime } from 'src/filter'
import upload from 'components/common/upload'
export default {
  data () {
    let startDate = new Date().getTime() - 7 * 24 * 3600 * 1000
    let endDate = new Date().getTime() - 24 * 3600 * 1000
    return {
      selectList: '', // 选择数据
      startTime: '', // 开始时间
      endTime: '', // 结束时间
      selectId: [], // 选中的id 数组
      socialPaymentSkuName: '', // 支付项目名称
      socialCompanyName: '', // 商户名称
      dateTime: [new Date(startDate), new Date(endDate)], // 缴费日期
      dateOptions: { // 时间组件参数
        disabledDate (time) {
          return time.getTime() > Date.now() - 8.64e7
        }
      },
      pageObj: {
        currentCount: 1
      }, // 分页数据
      dataList: [], // 数据列表
      httpAddress: '/net/schooladmin/school-student/import' // 导入文件的地址
      // httpAddress: 'https://jsonplaceholder.typicode.com/posts/', // 测试的导入文件的地址
    }
  },
  created () {
    this.init()
  },
  components: {
    upload
  },
  methods: {
    init () { // 初始化数据
      this.getData()
    },
    getData (int) { // 获取数据
      this.startTime = getDayInitTime(this.dateTime[0], 1) / 1000
      this.endTime = getDayInitTime(this.dateTime[1], 2) / 1000
      getPayLists({
        startTime: this.startTime,
        endTime: this.endTime,
        page: int,
        count: 15,
        socialPaymentSkuName: this.socialPaymentSkuName,
        socialCompanyName: this.socialCompanyName
      }).then(res => {
        this.dataList = res.data
        this.pageObj = res.page
      })
    },
    search () { // 搜索
      console.log(this.dateTime, 'this.data.timer')
      if (!this.socialPaymentSkuName || !this.socialCompanyName) {
        return this.$message({ message: '请输入正确的商户名称和缴费项目', type: 'warning' })
      }
      this.getData(1)
    },
    goPage (index, data) { // 路由跳转
      console.log(data, ':formatter="dataFormat"')
      switch (index) {
        case 1:
          this.$router.push({name: 'studentAdd'})
          break
        case 2:
          this.$router.push({name: 'payManageDetail', query: {id: data.id}})
          break
        case 3:
          this.$router.push({name: 'studentEdit', query: {id: data.id}})
          break
      }
    },
    handleSelectionChange (val) { // 改变选中
      let tem = val.map((value) => {
        return value.id
      })
      this.selectId = tem
      this.selectList = val
    },
    dataFormat (row, col, value) { // 性别过滤器
      return timeFormat(value, 'yyyy/MM/dd')
    },
    moneyFilter (row, col, value) {
      return currency(value)
    },
    exportData () { // 导出数据
      if (!this.dataList.length) {
        return this.$message({ message: '暂无数据,不支持导出', type: 'warning' })
      } else if (!this.selectId.length) {
        return this.$message({ message: '请选择数据导出', type: 'warning' })
      }
      // let loginKey = window.localStorage.loginKey
      window.open(`/net/socialadmin/social_order/exports?startTime=${this.startTime}&endTime=${this.endTime}&socialPaymentSkuName=${this.socialPaymentSkuName}&socialCompanyName=${this.socialCompanyName}&id=${this.selectId}`)
    }
  }
}
</script>
<style lang="less" scoped>
  .student {
    .color_b {
      color: #20a0ff;
    }
    padding: 20px;
    font-size: 14px;
    .search-box {
      padding: 25px 0 25px 25px;
      border: 1px solid #d3dce6;
      .choose {
        margin-right: 10px;
        .select-box {
          width: 120px;
        }
      }
    }
    .tip {
      margin: 20px;
      display: flex;
      justify-content: flex-end;
    }
    .footer {
      margin: 20px 0 20px 20px;
    }
    .btn_tip {
      position: relative;
      .blue {
        position: absolute;
        top: 0;
        left: 165px;
        height: 36px;
      }
    }
    .tip_word {
      margin-top: 10px;
      display: flex;
      color: #FF0000;
    }
  }
</style>